<template>
    <div id="home" >
        <nav-bar class="home-nav"><div slot='center'>购物街</div></nav-bar>
         <tab-control class="tab-control"
         :titles="['流行','新款','精选']"
                @tabClick='tabClick'
                ref="tabControl1"
                v-show='isTabShow'/>
        <Scroll class="content" 
        ref="scroll" 
        :probe-type='3'
        @scroll='contentScroll'
        :pull-up-load="true"
        @pullingUp='loadMore'>
            <home-swiper @swiperImageLoad='swiperImageLoad' :banners="banners"></home-swiper>
            <recommend-view :recommends="recommends"></recommend-view>
            <feature/>
            <tab-control :titles="['流行','新款','精选']"
                @tabClick='tabClick'
                ref="tabControl2"/>
            <goods-list :goods="showGoods"/>
        </Scroll> 
        <back-top @click.native='backClick' v-show='isShow'/>

    </div>
</template>

<script>
import HomeSwiper from './childComps/HomeSwiper'
import RecommendView from './childComps/RecommendView'
import Feature from './childComps/FeatureView'

import NavBar from 'components/common/navbar/NavBar'
import TabControl from 'components/content/tabControl/TabControl'
import GoodsList from '../../components/content/goods/GoodsList'
import Scroll from 'components/common/scroll/Scroll'

import {getHomeMultidata,getHomeGoods} from 'network/home.js'

import {itemListenerMixin,backTopMixin} from 'common/mixin'
    export default {
        name: 'Home',
        components:{
            HomeSwiper,
            RecommendView,
            Feature,
            TabControl,
            GoodsList,
            Scroll,
            // BackTop,
            NavBar,
        },
        data(){
            return {
                // result保存从服务端返回的数据
                banners:[],
                recommends:[],
                goods:{
                    'pop':{page:0,list:[]},
                    'new':{page:0,list:[]},
                    'sell':{page:0,list:[]}
                },
                currentType:'pop',
                // isShow:false,
                tabOffsetTop:0,
                isTabShow:false,
                saveY:0,
            }
        },
        mixins:[itemListenerMixin,backTopMixin],
        computed:{
            showGoods(){
                return this.goods[this.currentType].list
            }
        },
        methods:{
            /*
                事件监听相关的方法
            */
           swiperImageLoad(){
                //console.log(this.$refs.tabControl.$el.offsetTop);
                this.tabOffsetTop=this.$refs.tabControl2.$el.offsetTop
           },
        //    backClick(){
        //     //    this.$refs.scroll是获得scroll组件对象
        //        this.$refs.scroll.scrollTo(0,0,1000);
        //    },
           tabClick(index){
            //    console.log(index)
                switch(index){
                    case 0:
                        this.currentType='pop'
                        break;
                    case 1:
                        this.currentType='new'
                        break;
                    case 2:
                        this.currentType='sell'
                        break;
                    default:
                        break;
                }
                this.$refs.tabControl1.currentIndex=index;
                this.$refs.tabControl2.currentIndex=index;
           },
           
           contentScroll(position){
            //    1、判断backTop是否显示
                this.listenShowBackTop(position);
            //    2、决定tabControl是否吸顶
                this.isTabShow=(-position.y)>this.tabOffsetTop;
           },
           loadMore(){
            //    console.log('111111');
                this.getHomeGoods(this.currentType);

                // this.$refs.scroll.scroll.refresh();
           },
            /*
            网络请求相关的方法
            */ 
            // 第一个getHomeMultidata是方法的名字
            getHomeMultidata(){
                // 第二个getHomeMultidata是home.js里面导出的函数的名字..主要是处理网络请求
                getHomeMultidata().then(res=>{
                    // console.log(res);
                    this.banners=res.data.banner.list;
                    this.recommends=res.data.recommend.list;
                })
            },
            getHomeGoods(type){
                const page=this.goods[type].page+1;
                getHomeGoods(type,page).then(res=>{
                    this.goods[type].list.push(...res.data.list);
                    this.goods[type].page+=1;

                    // 完成上拉加载更多
                    this.$refs.scroll.finishPullUp()
               })
            },
            
        },
        created(){
            // 请求数据
            //1、请求多个数据--轮播图和推荐的数据
            this.getHomeMultidata();

            // 2、请求商品数据---具体数据
            this.getHomeGoods('pop');
            this.getHomeGoods('new');
            this.getHomeGoods('sell');
        },
        mounted(){
            // 1、图片加载完成的事件监听--防止事件抖动
            // let refresh = debounce(this.$refs.scroll.refresh,100)
            
            // 对监听的事件进行保存
            // this.homeImgListener=()=>{
            //     refresh();
            // }
            // this.$bus.$on('itemImgLoad',this.homeImgListener)

            // 2、获取tab-control的offsettop
            // 组件没有offsetTop
            // 所有的组件都有一个属性$el:用于获取组件中的元素
            // this.tabOffsetTop=this.$refs.tabControl.$el.offsetTop
        },  
        activated(){
            this.$refs.scroll.refresh();
            this.$refs.scroll.scrollTo(0,this.saveY,0)  
       },
        deactivated(){
            // 1、保存y值
            this.saveY=this.$refs.scroll.getScrollY();

            // 2、取消全局事件的监听
            this.$bus.$off('itemImgLoad',this.homeImgListener);

       }
    }
</script>

<style scoped>
    #home{
         /* padding-top: 44px; */
         height: 100vh;
         position: relative;
    }
    .home-nav{
        background-color: var(--color-tint);
        color: #fff;
    }
    .content{
        /* height: calc(100% - 93px);
        overflow: hidden;
        margin-top: 44px; */
        /* height:300px; */
        overflow: hidden;
        position: absolute;
        top:44px;
        bottom: 49px;
    }
    /* .fixed{
        position:fixed;
        left: 0;
        top: 44px;
        right: 0;

    } */
    .tab-control{
        position:relative;
        z-index: 9;
    }
</style>




